@charset "UTF-8";
/**
* 生成随机颜色
*/
/**
* 浅色
*/
/**
* 深色
*/
/**
* 裁剪任意边多边形
*/
.polygon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  -webkit-clip-path: polygon(50% 100%, 93.3012701892% 25%, 6.6987298108% 25%);
          clip-path: polygon(50% 100%, 93.3012701892% 25%, 6.6987298108% 25%);
  background-color: #f00;
  animation: clip 5s linear infinite alternate;
}

@keyframes clip {
  0% {
    -webkit-clip-path: polygon(50% 100%, 93.3012701892% 25%, 6.6987298108% 25%);
            clip-path: polygon(50% 100%, 93.3012701892% 25%, 6.6987298108% 25%);
  }
  100% {
    -webkit-clip-path: polygon(93.3012701892% 25%, 6.6987298108% 25%, 50% 100%);
            clip-path: polygon(93.3012701892% 25%, 6.6987298108% 25%, 50% 100%);
  }
}